﻿(function () {
    Ext.onReady(function () {
        //初始化 
        Ext.QuickTips.init();
        //创建一个grid组件会用到grid的一个面板（Ext.grid.Panel）
        var grid = Ext.create("Ext.grid.Panel", {
            title: "驾校数据列表",//组件的标题
            frame: true, //面板渲染
            width: 1000,
            height: 500,
            columns: [ //它是列模式集合
                {text: "驾校名称", dataIndex: "DrivingName", width: 100 },
                { text: "所在地市", dataIndex: "ProvinceCity", width: 100 },
                { text: "联系电话", dataIndex: "Telephone", width: 100 },
                { text: "驾校账号", dataIndex: "DrivingAccount", width: 100 },
                { //这是一个虚拟列
                    text: "激活", xtype: "actioncolumn", icon: '/Images/delete.png',
                    id: 'jh',
                    width: 100,
                    handler: function (grid, row, col) {
                        //给按钮注册事件，这里row是行，col是列，索引是从0开始的
                        alert(row + "--" + col);
                    }
                },
                { //这是一个虚拟列
                    text: "模块购买", xtype: "actioncolumn", icon: '/Images/delete.png',
                    id: 'mkgm',
                    width: 100,
                    handler: function (grid, row, col) {
                        //给按钮注册事件，这里row是行，col是列，索引是从0开始的
                        alert(row + "--" + col);
                    }
                },
                { //这是一个虚拟列
                    text: "续费确定", xtype: "actioncolumn", icon: '/Images/delete.png',
                    id: 'xfqd',
                    width: 100,
                    handler: function (grid, row, col) {
                        //给按钮注册事件，这里row是行，col是列，索引是从0开始的
                        alert(row + "--" + col);
                    }
                },
                { //这是一个虚拟列
                    text: "接口管理", xtype: "actioncolumn", icon: '/Images/delete.png',
                    id: 'jkgl',
                    width: 100,
                    handler: function (grid, row, col) {
                        //给按钮注册事件，这里row是行，col是列，索引是从0开始的
                        alert(row + "--" + col);
                    }
                }
            ],
            //工具栏的数组，这里的iconCls就是按钮的样式，自己到外面去定义
            tbar: [
                { xtype: 'button', text: '添加', iconCls: "addClass" },
                { xtype: 'button', text: '查看', iconCls: "seeClass" },
                { xtype: 'button', text: '修改', iconCls: "updateClass" },
                { xtype: 'button', text: '删除', iconCls: "deleteClass",
                    handler: function (o) {
                        //为删除注册事件
                        //获得grid
                        var grid = o.ownerCt.ownerCt;
                        //获得grid中数据的个数
                        //alert(grid.getStore().getCount());
                        //获取要选中的数据
                        var selecData = grid.getSelectionModel().getSelection();
                        if (selecData.length == 0) {
                            Ext.Msg.alert("提示", "您最少要选择一条数据");
                        } else {
                            //1.得到要删除数据的主键id（我们这里没用id就用name）
                            var st = grid.getStore(); //获得store
                            var ids = []; //存放ids的数组
                            //遍历选中的数据，往ids中加
                            Ext.Array.each(selecData, function (record) {
                                ids.push(record.get('name'));
                            });

                            //2.发个ajax到后台去删除数据
                            Ext.Ajax.request({
                                url: '/Home/Delete',
                                params: { ids: ids.join(',') },
                                method: 'post',
                                timeout: 2000, //延迟2秒执行
                                success: function (response, opts) {
                                    //数据库中删除成功以后，再在页面上删除数据，有问题，有分页的时候怎么办？TODO
                                    Ext.Array.each(selecData, function (record) {
                                        st.remove(record); //从所有的store中删除
                                    });
                                }
                            });
                        }
                    }
                }
            ],
            //分页控件 
            dockedItems: [{
                xtype: 'pagingtoolbar',
                //分页也需要store
                store: Ext.data.StoreManager.lookup("s_DrivingSchool"),
                dock: 'bottom', //定位在底部
                displayInfo: true//是否展示信息（控制显示总记录数的）
            }],
            //选择模式（加多选框）
            selType: 'checkboxmodel', //设定选择模式
            multiSelect: true, //这样就允许多选了
            //渲染到哪个容器里
            renderTo: 'gridDemoContainer',
            //数据集合，根据id找store
            store: Ext.data.StoreManager.lookup("s_DrivingSchool")
        });
    });
})();